<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>
<title>系统资源表单</title>

<div style="padding:12px;">
	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->
				
				<div class="row">
					<div class="col-xs-3">
						<ul id="tree1" class="ztree list" style="display: none;"></ul>
					</div>
					
					<div class="col-xs-9">
						<form class="form-horizontal" id="form" method="get">
							<input type="hidden" value="${id}" name="id">
							<input type="hidden" name="parentId" id="parentId">
							
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="username">父节点:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" id="parentName" class="col-xs-12 col-sm-5" readonly />
										<button class="btn btn-white btn-warning" type="button" onclick="removeNode();" style="border-left:none;"><i class="ace-icon fa fa-times"  style="font-size:18px;margin:0px;"></i></button>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="name">名　称:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" name="name" id="name" class="col-xs-12 col-sm-5" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="identity">标　示:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" name="identity" id="identity" class="col-xs-12 col-sm-5" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="url">URL:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" name="url" id="url" class="col-xs-12 col-sm-8" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="weight">排　序:</label>
								<div class="col-xs-12 col-sm-9">
									<input type="text" class="input-mini" id="spinner3" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="admin">是否显示:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix" style="height:33px;line-height: 33px;">
										<label class="line-height-1 blue">
											<input name="show" checked="checked" value="true" type="radio" class="ace" />
											<span class="lbl"> 显示</span>
										</label>
										<label class="line-height-1 blue">
											<input name="show" value="false" type="radio" class="ace" />
											<span class="lbl"> 隐藏</span>
										</label>
									</div>
								</div>
							</div>
							
						</form>
					</div>
				</div>
	
			<!-- PAGE CONTENT ENDS -->
		</div><!-- /.col -->
	</div><!-- /.row -->
</div>
<script type="text/javascript">
var tree ;
var scripts = [null, 
               "${ctx}/static/admin/ace/js/jquery.validate.js",
               "${ctx}/static/js/localization/messages_zh.js",
               "${ctx}/static/admin/ace/js/ace/elements.spinner.js",
               "${ctx}/static/admin/ace/js/fuelux/fuelux.spinner.js",
               null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		
		tree = $("#tree1");
		$.get("${ctx}/admin/sys/resource/tree", function(result) {
			$.fn.zTree.init(tree, {
				check: {
					enable: true,
					chkStyle: "radio",
					radioType: "all"
				},
				callback: {
					onClick: onClick,
					onCheck: onCheck
				}
			}, result);
			tree.css({
				"position": "fixed",
				"height": $(".layui-layer-content").height()+"px"
			}).slideDown("fast");
			expandNodeAll();
		},"JSON") ;
		
		
		if(undefined != "${id}" && "${id}" != "") {
			$.get("${ctx}/admin/sys/resource/get/${id}", function(result){
				$("#form").autofill(result);
				window.setTimeout(function() {
					if(undefined != result && undefined != result.parentId) {
						var treeObj = $.fn.zTree.getZTreeObj("tree1");
						var node = treeObj.getNodeByParam("id", result.parentId, null);
						treeObj.checkNode(node, true, false);
						treeObj.selectNode(node);
						$("#parentId").val(node.parentId) ;
						$("#parentName").val(node.name) ;
					}
				}, 100);
				
			});
		}
		
		
		
		$('#form').validate({
			errorElement: 'div',
			errorClass: 'help-block',
			rules: {
				name: {
					required: true
				}
			},
			highlight: function (e) {
				$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
			},
			success: function (e) {
				$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
				$(e).remove();
			},
			errorPlacement: function (error, element) {
				if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
					var controls = element.closest('div[class*="col-"]');
					if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
					else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
				}
				else if(element.is('.select2')) {
					error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
				}
				else if(element.is('.chosen-select')) {
					error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
				}
				else error.insertAfter(element.parent());
			}
		});
		
		
		$('#spinner3').ace_spinner({
			value:0,min:0,max:1000,step:1, on_sides: true, icon_up:'ace-icon fa fa-plus smaller-75', 
			icon_down:'ace-icon fa fa-minus smaller-75', btn_up_class:'btn-success' , btn_down_class:'btn-danger'
		}).css("height","33px").siblings("div").children("button").css("height","33px");
		
	});
});



function removeNode() {
	var treeObj = $.fn.zTree.getZTreeObj("tree1");
	var nodes = treeObj.getCheckedNodes(true);
	treeObj.checkNode(nodes[0], false, false);
	treeObj.cancelSelectedNode(nodes[0]);
	$("#parentId").val("") ;
	$("#parentName").val("") ;
}

function expandNodeAll() {
	var zTree = $.fn.zTree.getZTreeObj("tree1");
	zTree.expandAll(true);
}

function onClick(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("tree1");
	zTree.checkNode(treeNode, !treeNode.checked, null, true);
	return false;
}
function onCheck(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("tree1"),
	nodes = zTree.getCheckedNodes(true), id = "", name = "";
	
	for (var i=0, l=nodes.length; i<l; i++) {
		id += nodes[i].id + ",";
		name += nodes[i].name + ",";
	}
	if (id.length > 0 ) id = id.substring(0, id.length-1);
	if (name.length > 0 ) name = name.substring(0, name.length-1);
	$("#parentId").val(id) ;
	$("#parentName").val(name) ;
	
}

</script>
